<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        // 创建数组
        // 数组是Array类型的对象
        let a1 = new Array(1, 'abc');
        console.log(a1)
        // 设置一个整数参数时，表示建立容量为数的空数组
        console.log(new Array(10))

        // 使用字面量创建，推荐
        let a2 = [1, 'abc'];
        console.log(a2)

        // 多维数组
        let a3 = [[1, 2], [3, 4]]
        console.log(a3)

        // 数组长度
        console.log(a3.length)

        // 使用.of创建,参数是数组的元素
        let a4 = Array.of(1, 'abc');
        console.log(a4)

        // 查看数组的类型
        console.log(typeof a4) // object
        // 使用isArray判断是否是数组
        console.log(Array.isArray(a4)) // true


        // 数组转换为字符串
        console.log(a4.toString()) // 1,abc
        // 使用String函数显示转换
        console.log(String(a4))
        // 使用join函数连接成字符串
        console.log(a4.join(',')) // 1,abc

        // 类数组对象（如字符串）转换为数组
        console.log(Array.from("abc")) //  ["a", "b", "c"]

        // 对象转换为数组（前提是设置length属性，数组的长度，key必须是数值字符或数字(从0开始，如果不从0则该位置为undefined)
        let o1 = {
            '0': 'fff',
            '1': 'ddd',
            length: 1
        }
        let o2 = {
            '1': 'fff',
            '2': 'ddd',
            length: 2
        }
        console.log(Array.from(o1)) // ["fff"]

        console.log(Array.from(o2)) // [undefined, "fff"]

        Array.from("abc", (v, k) => {
            console.log(`${v}---${k}`) // a---1  b---2  c---3
        })
        Array.from([1, 3, 4], (v, k) => {
            console.log(`${v}---${k}`) // 1---1  3---2  4---3
        })


        // 数组展开，使用...将数组展开为多个值,数组合并比较简单了
        let d1 = [1, 3, 4, 5];
        let d2 = [6, 7, 8, 9];
        let d3 = [...d1, ...d2]
        console.log(d3.toString()) //1,3,4,5,6,7,8,9

        // 作为参数时，表示可变参数，接受任意多个的参数
        function f1(...args) {
            // 函数内部args为数组
            console.log(Array.isArray(args)) // true
            // 展开语法放在数组中
            console.log([...args]);
            // 直接使用数组
            console.log(args.toString()) //3,3,6,1
        }

        f1(3, 3, 6, '1')

        // 解构赋值
        let [name, age] = ['nihao', 23];
        console.log(name)

        // 剩余解构赋值
        let [a, ...other] = ['hello', 23, 'jj', '33'];
        console.log(other) // (3) [23, "jj", "33"]

        // 字符串解构
        let [...s] = "hello,world";
        console.log(s) // (11) ["h", "e", "l", "l", "o", ",", "w", "o", "r", "l", "d"]
        // 以上写法可以使用Array.from()
        console.log(Array.from("hello,world")) // (11) ["h", "e", "l", "l", "o", ",", "w", "o", "r", "l", "d"]
        
        // 解构作为参数
        function fun3([a,b]){
            console.log(a);
        }
        fun3(['a','b']) //a
    </script>
</body>

</html>